<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="index.toString()"
    text-color="#fff">
    <el-menu-item index="1" @click="changeRouter('/',1)">
      <el-icon>
        <Notification />
      </el-icon>
      <span>设备控制</span>
    </el-menu-item>
    <el-menu-item index="2" @click="changeRouter('/meetinghistory',2)">
      <el-icon>
        <Clock />
      </el-icon>
      <span>会议历史</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter } from "vue-router";
import { Notification, Clock } from "@element-plus/icons-vue";
import { UseStore } from '@/stores/EXINDEX.JS';
import { toRefs } from 'vue';
const { increment , decrease ,changeTopic} = UseStore()
const { index } = toRefs( UseStore())
const router = useRouter();
const changeRouter = (path, type) => {
  
  switch(type) {
    case 1:
    decrease();
    changeTopic("设备控制");
    break;
    case 2: 
    increment();
    changeTopic("会议历史");
    break;
    default:
      break;
  }
  router.push({
    path: path,
  });

};

</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
}
</style>